<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--引|入 SwiperJs -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
</head>

<body>
    <div class="my-carousel bg-darker">
        <div class="swiper my-carousel.swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-card">
                        <div><img src="./ikun.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-card">
                        <div><img src="./ikun.jpg" alt="" /></div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper-card">
                        <div><img src="./ikun.jpg" alt="" /></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="my-carousel__actions">
            <button class="btn btn--subtle my-carousel__control my-carousel__control--prev">
                上一个
            </button>
            <button class="btn btn--subtle my-carousel__control my-carousel__control--next">
                下一个
            </button>
        </div>
    </div>
    <script src="./main.js"></script>
</body>

</html>